CE.TOUR = {

    slide_idx: 0,

    click: function (e) {
        var $target = $(e.target);
        if (e.target.tagName.toUpperCase() === "INPUT") {
            if ($target.val() === "< Previous") {
                CE.TOUR.slide_idx = (CE.TOUR.slide_idx - 1) % CE.TOUR.slides.length;
                CE.TOUR.draw();
            } else if ($target.val() === "Next >" || $target.val() === "Start Tour >") {
                CE.TOUR.slide_idx = (CE.TOUR.slide_idx + 1) % CE.TOUR.slides.length;
                CE.TOUR.draw();
            } else {
                CE.WIDGETS.DIALOG.close();
            }
        } else {
            // reset slide to first slide
            CE.TOUR.slide_idx = 0;
            CE.WIDGETS.DIALOG.close();
        }
    },

    init: function () {

        this.slides = [{
            title: $('#ce_intro_title').html(),
            content: $('#ce_intro').html(),
            left: $('#ce_map').width() / 2 - 200,
            top: 100
        }, {
            title: $('#ce_tour_step1_title').html(),
            content: $('#ce_tour_step1_content').html(),
            stem: function () {
                return {
                    x: $('#ce_right').offset().left,
                    y: 150
                };
            }
        }, {
            title: $('#ce_tour_step2_title').html(),
            content: $('#ce_tour_step2_content').html(),
            stem: function () {
                return {
                    x: $('#ce_map').width() * 0.7,
                    y: $('#ce_map').height() * 0.7
                };
            }
        }, {
            title: $('#ce_tour_step3_title').html(),
            content: $('#ce_tour_step3_content').html(),
            stem: function () {
                return {
                    x: CE.WIDGETS.SLIDER.$.width() * 0.7,
                    y: CE.WIDGETS.SLIDER.$.offset().top
                };
            }
        }, {
            title: $('#ce_tour_step4_title').html(),
            content: $('#ce_tour_step4_content').html(),
            stem: function () {
                return {
                    x: $('#search_area').offset().left,
                    y: $('#search_area').offset().top + 5
                };
            }
        }, {
            title: $('#ce_tour_step5_title').html(),
            content: $('#ce_tour_step5_content').html(),
            stem: function () {
                return {
                    x: $('#ce_menu_theme').offset().left - 20,
                    y: $('#ce_menu_theme').offset().top + 10
                };
            }
        }, {
            title: $('#ce_tour_title').html(),
            content: $('#ce_tour').html(),
            left: $('#ce_map').width() / 2 - 300,
            top: 100,
            width: 600
        }];
        this.draw();

    },

    draw: function () {

        var slide = this.slides[this.slide_idx];

        var content = "<p class='tour-container'>" + slide.content + "</p>";

        if (this.slide_idx === 0) {
            content += '<p class="tour-el">';
            content += '<input class="ce-button-tour tour-btn-0" type="button" value="Skip">';
        } else {
            content += '<h4 class="tour-el">Step ' + this.slide_idx + ' / ' + (this.slides.length - 1) + '</h4><p class="tour-el">';
            content += '<input class="ce-button-tour tour-btn-0" type="button" value="< Previous">';
        }

        if (this.slide_idx === 0) {
            content += '<input class="ce-button-tour tour-btn-1" type="button" value="Start Tour >">';
        } else if (this.slide_idx < this.slides.length - 1) {
            content += '<input class="ce-button-tour tour-btn-1" type="button" value="Next >">';
        } else {
            content += '<input class="ce-button-tour tour-btn-1" type="button" value= "Start using the Atlas...">';
        }
        content += "</p>";

        // draw the tour slide dialog.
        this.$ = CE.WIDGETS.DIALOG.draw({
            content: content,
            title: slide.title,
            width: slide.width || 400,
            on_click: this.click
        });

        // absolute positioning (if specified)
        if (slide.left) {
            this.$.css({
                left: slide.left + 'px',
                top: slide.top + 'px'
            });
        } else if (slide.stem) {
            var stem = slide.stem();
            CE.WIDGETS.DIALOG.stem(stem.x, stem.y);
        }
    },

    about: function () {

        // draw the tour slide dialog.
        this.$ = CE.WIDGETS.DIALOG.draw({
            content: $('#ce_about').html(),
            title: $('#ce_about_title').html()
        });

    }
};
